<template>
    <li class="video-item media clearfix">
        <router-link to="/playing" class="video-media">
            <div class="video-media-object  pull-left">
                <img :src="video.cover" alt="#" />
                <template v-if="isCtrl">
                    <div class="video-masker"></div>
                    <div class="video-ctrl"></div>
                </template>
            </div>

            <div class="media-body over-hidden">
                <h4 class="media-heading">{{video.title}}</h4>
                <p class="media-desc">发布时间：{{video.created_at}}</p>
                <p class="meida-secondary">{{video.num}}人次播放</p>
            </div>
        </router-link>
    </li>
</template>

<script>
import VideoItem from '@/components/VideoItem.vue';
export default {
    components: {
        VideoItem
    },
    props: {
        isCtrl: {
            type: Boolean,
            default: false
        },
        video: {
            type: Object,
            default: {
                cover: "",
                created_at: "",
                id: 0,
                num: 0
            }
        }
    },
    data() {
        return {
        };
    },
    computed: {},
    methods: {},
    created() {},
    mounted() {}
};
</script>
<style lang="scss" scoped>
.video-item {
    padding: 25px;
    position: relative;
    &:before {
        content:'';
        display: block;
        width: 100%;
        height: 2px;
        position: absolute;
        left: 0;
        bottom: 0;
        background-color: #f0f0f0;
    }

    .media-heading {
        font-size: 28px;
        line-height: 1.5;
    }

    .media-desc {
        font-size: 24px;
        line-height: 2;
    }

    .meida-secondary {
        font-size: 24px;
        color: #888;
    }
}

.video-media {
    display: flex;
    color: #4a4a4a;
    > img {
        height: 100%;
    }

    .video-media-object {
        width: 240px;
        height: 160px;
        margin-right: 30px;
        position: relative;
        overflow: hidden;
    }

	.video-masker {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,.6);
	}
	.video-ctrl {
		position: absolute;
		width: 90px;
		height: 90px;
		border: 4px solid #fff;
		left: 50%;
		top: 50%;
		transform: translate3d(-50%, -50%, 0);
		border-radius: 100%;
		background-color: rgba(0,0,0,.4);
		&:after {
			content: '';
			border-style: solid;
			border-color: transparent transparent transparent #fff;
			border-width: 24px 0 24px 36px;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate3d(-30%, -50%, 0);
			border-radius: 6px;
		}
	}
}
</style>
